import Navbar from '../../compoents/Navbar'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import styles from './index.module.css'

function Index() {
    const navigate = useNavigate()
    
  
    
    const [jiezhen,setJiezhen] = useState(15)
    const [paidui,setPaidui] = useState(20)
    const [dengdai,setDengdai] = useState(5)
    const handleRefresh = () => {
        // 刷新队列逻辑
        const time = Math.floor(Math.random() * 100)
        console.log('刷新队列')
        if(time%2==0&&dengdai>1){
          setDengdai(dengdai-1)
        }
    }

  return (
    <div className={styles.container}>
      <Navbar title='候诊详情' showBack onBack={() => navigate(-1)} />
      
      {/* 医生信息区域 */}
      <div className={styles.doctorSection}>
        <div className={styles.doctorInfo}>
          <div className={styles.doctorAvatar}>
            👨‍⚕️
          </div>
          <div className={styles.doctorDetails}>
            <div className={styles.doctorNameBox}>
                 <h1 className={styles.doctorName}>刘医生</h1>
            <p className={styles.doctorTitle}>主任医师</p>
            </div>
           
            <p className={styles.doctorDepartment}>门诊外一科 四川省保健院南苑</p>
          </div>
        </div>
      </div>

      {/* 信息卡片区域 */}
      <div className={styles.infoCards}>
        <div className={`${styles.infoCard} ${styles.cardYellow}`}>
          <p className={styles.cardLabel}>当前接诊号</p>
          <p className={`${styles.cardNumber} ${styles.numberOrange}`}>{jiezhen}</p>
        </div>
        <div className={`${styles.infoCard} ${styles.cardBlue}`}>
          <p className={styles.cardLabel}>我的排队号</p>
          <p className={`${styles.cardNumber} ${styles.numberBlue}`}>{paidui}</p>
        </div>
        <div className={`${styles.infoCard} ${styles.cardPink}`}>
          <p className={styles.cardLabel}>等待人数</p>
          <p className={`${styles.cardNumber} ${styles.numberRed}`}>{dengdai}</p>
        </div>
      </div>

      {/* 刷新按钮区域 */}
      <div className={styles.refreshSection}>
        <button className={styles.refreshButton} onClick={handleRefresh}>
          刷新队列
        </button>
      </div>

      {/* 底部提示 */}
      <div className={styles.disclaimer}>
        注:如有特殊情况,请以现场排队情况为准
      </div>
    </div>
  )
}

export default Index
